<template>
  <view v-if="userInfo">
    <!-- Main Start -->
    <!-- 头部修改头像 -->
    <view class="header bg-white pt-[30rpx]">
      <view class="flex justify-center pb-5">
        <avatar-upload :modelValue="userInfo.avatar" file-key="url" :round="true" @update:modelValue="handleAvatarChange"></avatar-upload>
      </view>
    </view>

    <!-- 用户ID -->
    <view class="item text-nr flex justify-between" @click="(showUserName = true), (newUsername = userInfo.username)">
      <view class="label">账号</view>
      <view class="content">{{ userInfo.account }}</view>
      <u-icon name="arrow-right" size="22" color="#666"></u-icon>
    </view>

    <!-- 昵称 -->
    <view class="item text-nr flex justify-between" @click="(showNickName = true), (newNickname = userInfo.nickname)">
      <view class="label">昵称</view>
      <view class="content">{{ userInfo.nickname }}</view>
      <u-icon name="arrow-right" size="22" color="#666"></u-icon>
    </view>

    <!-- 性别 -->
    <view class="item text-nr flex justify-between" @click="changeSex">
      <view class="label">性别</view>
      <view class="content">{{ userInfo.sex }}</view>
      <u-icon name="arrow-right" size="22" color="#666"></u-icon>
    </view>

    <!-- 手机号 -->
    <view class="item text-nr flex justify-between">
      <view class="label">手机号</view>
      <view class="content">{{ userInfo.mobile == '' ? '未绑定手机号' : userInfo.mobile }}</view>

      <!-- #ifdef MP-WEIXIN -->
      <u-button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" type="primary" shape="circle" size="mini" :plain="true">
        {{ userInfo.mobile == '' ? '绑定手机号' : '更换手机号' }}
      </u-button>
      <!-- #endif -->
      <!-- #ifndef MP-WEIXIN -->
      <u-button @click="showMobilePop = true" size="mini" type="primary" shape="circle" :plain="true">{{ userInfo.mobile == '' ? '绑定手机号' : '更换手机号' }}</u-button>
      <!-- #endif -->
    </view>

    <!-- 注册时间 -->
    <view class="item text-nr flex justify-between">
      <view class="label">注册时间</view>
      <view class="content">{{ userInfo.create_time }}</view>
    </view>

    <!-- 昵称修改组件 -->
    <u-popup v-model="showNickName" :closeable="true" mode="center" :maskCloseAble="false" border-radius="20">
      <view class="px-[50rpx] py-[40rpx] bg-white" style="width: 85vw">
        <form @submit="changeNameConfirm">
          <view class="mb-[70rpx] text-xl text-center">修改昵称</view>
          <u-form-item borderBottom><input class="nr h-[60rpx] w-full" :value="userInfo.nickname" name="nickname" type="nickname" placeholder="请输入昵称" /></u-form-item>
          <view class="mt-[80rpx]">
            <button class="bg-primary text-white w-full h-[80rpx] !text-lg !leading-[80rpx] rounded-full" form-type="submit" size="mini" hover-class="none">确定</button>
          </view>
        </form>
      </view>
    </u-popup>

    <!-- 账号修改组件 -->
    <u-popup v-model="showUserName" :closeable="true" mode="center" border-radius="20">
      <view class="px-[50rpx] py-[40rpx] bg-white" style="width: 85vw">
        <view class="mb-[70rpx] text-xl text-center">修改账号</view>
        <u-form-item borderBottom><u-input class="flex-1" v-model="newUsername" placeholder="请输入账号" :border="false" /></u-form-item>
        <view class="mt-[80rpx]"><u-button @click="changeUserNameConfirm" type="primary" shape="circle">确定</u-button></view>
      </view>
    </u-popup>

    <!-- 性别修改组件 -->
    <u-picker mode="selector" v-model="showPicker" confirm-color="#4173FF" :default-selector="[0]" :range="sexList" @confirm="changeSexConfirm" />

    <!-- 账号修改组件 -->
    <u-popup v-model="showMobilePop" :closeable="true" mode="center" border-radius="20">
      <view class="px-[50rpx] py-[40rpx] bg-white" style="width: 85vw">
        <view class="mb-[70rpx] text-xl text-center">修改手机号码</view>
        <u-form-item borderBottom><u-input class="flex-1" v-model="newMobile" placeholder="请输入新的手机号码" :border="false" /></u-form-item>
        <u-form-item borderBottom>
          <u-input class="flex-1" v-model="mobileCode" placeholder="请输入验证码" :border="false" />
          <view class="border-l border-solid border-0 border-light pl-3 text-muted leading-4 ml-3 w-[180rpx]" @click="sendSms">
            <u-verification-code ref="uCodeRef" :seconds="60" @change="codeChange" change-text="x秒" />
            {{ codeTips }}
          </view>
        </u-form-item>
        <view class="mt-[80rpx]"><u-button @click="changeCodeMobile" type="primary" shape="circle">确定</u-button></view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { FieldType, SMSEnum } from '@/utils/type';
import { mapState, mapActions, mapGetters } from 'vuex';
export default {
  data() {
    return {
      // 用户信息
      userInfo: {},
      // 用户信息的枚举
      fieldType: FieldType.NONE,
      //选择性别数据
      sexList: ['男', '女'],
      //显示昵称弹窗
      showNickName: false,
      //显示账户弹窗
      showUserName: false,
      //显示性别选择弹窗
      showPicker: false,
      // 显示手机号验证码调整弹窗 非小程序才需要
      showMobilePop: false,
      //新昵称
      newNickname: '',
      //新账号
      newUsername: '',
      //新的手机号码
      newMobile: '',
      //修改手机验证码
      mobileCode: '',
      codeTips: ''
    };
  },
  onShow() {
    this.getUser();
  },
  methods: {
    // 获取用户信息
    async getUser() {
      this.userInfo = await uni.$u.api.getUserInfo();
    },
    // 获取验证码显示字段
    codeChange(text) {
      this.codeTips = text;
    },
    // 发送验证码
    async sendSms() {
      if (!this.newMobile) return uni.$u.toast('请输入新的手机号码');
      if (this.$refs.uCodeRef.canGetCode) {
        await uni.$u.api.smsSend({
          scene: this.userInfo.mobile ? SMSEnum.CHANGE_MOBILE : SMSEnum.BIND_MOBILE,
          mobile: this.newMobile
        });
        uni.$u.toast('发送成功');
        this.$refs.uCodeRef.start();
      }
    },
    handleAvatarChange(value) {
      this.fieldType = FieldType.AVATAR;
      this.setUserInfoFun(value);
    },

    // 验证码修改手机号-非微信小程序
    async changeCodeMobile() {
      await uni.$u.api.userBindMobile({
        type: this.userInfo.mobile ? 'change' : 'bind',
        mobile: this.newMobile,
        code: this.mobileCode
      });
      uni.$u.toast('操作成功');
      this.showMobilePop = false;
      this.getUser();
    },
    // 修改用户信息
    async setUserInfoFun(value) {
      await uni.$u.api.userEdit({
        field: this.fieldType,
        value: value
      });
      uni.$u.toast('操作成功');
      this.getUser();
    },

    // 显示修改用户性别弹窗
    changeSex() {
      this.showPicker = true;
      this.fieldType = FieldType.SEX;
    },

    // 修改用户性别
    changeSexConfirm(value) {
      this.setUserInfoFun(value[0] + 1);
      this.showPicker = false;
    },

    // 修改用户账号
    changeUserNameConfirm() {
      if (this.newUsername == '') return uni.$u.toast('账号不能为空');
      if (this.newUsername.length > 10) return uni.$u.toast('账号长度不得超过十位数');

      this.fieldType = FieldType.USERNAME;
      this.setUserInfoFun(this.newUsername);
      this.showUserName = false;
    },

    // 修改用户昵称
    async changeNameConfirm(e) {
      this.newNickname = e.detail.value.nickname;
      if (this.newNickname == '') return uni.$u.toast('昵称不能为空');
      if (this.newNickname.length > 10) return uni.$u.toast('昵称长度不得超过十位数');
      this.fieldType = FieldType.NICKNAME;
      await this.setUserInfoFun(this.newNickname);

      this.showNickName = false;
    },

    // 微信小程序 绑定｜｜修改用户手机号
    async getPhoneNumber(e) {
      const { encryptedData, iv, code } = e.detail;
      const data = {
        code,
        encrypted_data: encryptedData,
        iv
      };
      if (encryptedData) {
        await uni.$u.api.userMnpMobile({
          ...data
        });
        uni.$u.toast('操作成功');
        this.getUser();
      }
    },

    goPage(url) {
      uni.navigateTo({
        url: url
      });
    }
  }
};
</script>

<style lang="scss">
.header {
  width: 100%;

  image {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
  }
}

.item {
  margin-top: 2rpx;
  padding: 30rpx;
  background-color: #ffffff;

  .label {
    width: 150rpx;
  }

  .content {
    flex: 1;
    width: 80%;
  }
}
</style>
